<template>
  <!-- 分类浏览 -->
  <section id="categories" class="py-16 bg-gray-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-12">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark"
          >浏览乐谱分类</h2
        >
        <p class="mt-4 text-neutral max-w-2xl mx-auto"
          >根据你的乐器和音乐喜好，探索我们丰富的乐谱分类</p
        >
      </div>

      <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        <a v-for="(cate, index) in data" :key="index" class="group">
          <div
            class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-lg transition-custom h-full flex flex-col"
          >
            <div
              class="relative overflow-hidden h-40"
              @click="toDetail(cate.id)"
            >
              <img
                :src="HttpManager.attachImageUrl(cate.pic)"
                :alt="cate.title"
                class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
              />
              <div
                class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"
              ></div>
              <div class="absolute bottom-0 left-0 p-4">
                <h3 class="text-white font-semibold">{{ cate.title }}</h3>
                <p class="text-white/80 text-sm">{{ cate.count + '+ 乐谱' }}</p>
              </div>
            </div>
            <div class="flex-grow p-4">
              <p class="text-neutral text-sm">{{ cate.introduction }}</p>
            </div>
          </div>
        </a>
      </div>

      <div class="mt-10 text-center">
        <a
          href="#"
          class="inline-flex items-center text-primary font-medium hover:underline"
        >
          <el-pagination
            class="pagination"
            background
            layout="prev, pager, next"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="songList.length"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
          <i class="fa fa-arrow-right ml-2"></i>
        </a>
      </div>
    </div>
  </section>
</template>

<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import HttpManager from '@/api';
  import { ResponseBody } from '@/types';

  // const categories = [
  //   {
  //     title: '钢琴乐谱',
  //     img: 'https://picsum.photos/400/300?random=20',
  //     desc: '古典、流行、爵士等多种风格的钢琴谱',
  //     count: 4200,
  //   },
  //   {
  //     title: '吉他乐谱',
  //     img: 'https://picsum.photos/400/300?random=21',
  //     desc: '民谣、摇滚、古典吉他谱和和弦谱',
  //     count: 3800,
  //   },
  //   {
  //     title: '小提琴乐谱',
  //     img: 'https://picsum.photos/400/300?random=22',
  //     desc: '协奏曲、奏鸣曲和独奏曲乐谱',
  //     count: 2500,
  //   },
  //   {
  //     title: '管弦乐乐谱',
  //     img: 'https://picsum.photos/400/300?random=23',
  //     desc: '交响曲、协奏曲和室内乐乐谱',
  //     count: 1800,
  //   },
  // ];
  const pageSize = ref(4); // 页数
  const currentPage = ref(1); // 当前页
  const songList = ref<string[]>([]);
  const toDetail = (id: number) => {
    console.log(id);
  };
  function handleCurrentChange(val: number) {
    currentPage.value = val;
  }
  // 根据需要添加交互逻辑
  HttpManager.getSongListOfStyle('乐器').then((res) => {
    currentPage.value = 1;
    const result = (res as ResponseBody).data.sort();
    result.map((item: any) => {
      item.count = Math.floor(Math.random() * 1000) + 1000; // 随机生成歌曲数量，范围为 1000-2000
      return item;
    });
    songList.value = result;
  });
  const data = computed(() => {
    return songList.value.slice(
      (currentPage.value - 1) * pageSize.value,
      currentPage.value * pageSize.value
    );
  });
</script>

<style scoped>
  .categories-section {
    background: #f9fafb;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
  }
</style>
